<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 
			 column-count 	规定元素应该被分隔的列数。 	
			 column-fill 	规定如何填充列。 	
			 column-gap 	规定列之间的间隔。 	
			 column-rule 	设置所有 column-rule-* 属性的简写属性。 	
			 column-rule-color 	规定列之间规则的颜色。 	
			 column-rule-style 	规定列之间规则的样式。 	
			 column-rule-width 	规定列之间规则的宽度。 	
			 column-span 	规定元素应该横跨的列数。 	
			 column-width 	规定列的宽度。 	
			 columns 	规定设置 column-width 和 column-count 的简写属性。
			 
			 */
			*{
				margin:0;
				padding:0;
			}
			div{
				width:600px;
				height:300px;
				border:2px solid black;
				
				-moz-column-count:3; 	/* Firefox */
				-webkit-column-count:3; /* Safari 和 Chrome */
				column-count:3;
				
				-moz-column-gap:40px;		/* Firefox */
				-webkit-column-gap:40px;	/* Safari 和 Chrome */
				column-gap:40px;
				
				-moz-column-rule:3px outset #ff0000;	/* Firefox */
				-webkit-column-rule:3px outset #ff0000;	/* Safari and Chrome */
				column-rule:3px outset #ff0000;
			}
		</style>
	</head>
	<body>
		<h2>通过 CSS3，您能够创建多个列来对文本进行布局</h2>
		<hr>
		<h2>多列属性：</h2>
		<ol>
			<li>
				column-count属性规定元素应该被分隔的列数：
			</li>
			<li>
				column-gap属性规定列之间的间隔：
			</li>
			<li>
				column-rule属性设置列之间的宽度、样式和颜色规则。
			</li>
		</ol>
		<div></div>
	</body>
</html>
